<template>
  <div class="cover-layer" v-if="checked">
    <input type="checkbox" :checked="checked" @change="handleClose($event.target.checked)" />

    <div class="pos-center content-main confirm-box">
      <div class="model-title">{{title}}</div>
      <el-input type="text" v-model="inputText" :placeholder="content" />

      <div class="operation-buttons margin--tpo flex-space">
        <button class="theme-bd" @click="handleCancel">取消</button>
        <button class="theme-bg" @click="handleConfirm">确定</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean,
    title: {
      type: String,
      default() {
        return '提示消息'
      }
    },
    content: {
      type: String,
      default() {
        return '确定执行该项操作吗?'
      }
    }
  },

  data() {
    return {
      inputText: ''
    }
  },

  methods: {
    handleClose(status = false) {
      this.$emit('change', status);
      this.inputText = '';
    },
    handleCancel() {
      this.$emit('cancel');
      this.handleClose();
    },
    handleConfirm() {
      this.$emit('confirm', this.inputText);
      this.handleClose();
    },
  }
}
</script>

<style lang="scss" scoped>
.cover-layer {
  input {
    display: none;
  }

  .confirm-box {
    width: 280px;

    .model-title {
      font-size: 14px;
    }

    .el-input {
      margin: 14px 0 30px;
    }

    .el-input__inner {
      height: 30px;
      line-height: 30px;
    }

    button {
      padding: 5px 20px;
      cursor: pointer;
      font-size: 14px;
    }
  }
}
</style>